<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/chat_window.css}"/>
</head>
<body>

<div class="container" id="app">
    <div class="row">
        <div class="col">
            <ul>
                <li v-for="(friend, index) in my_friends">
                    <div class="shadow p-3 mb-5 bg-white rounded">
                        <img :src="friend.avatar" :alt="friend.nickname" style="width: 50px;" class="img-thumbnail">
                        {{friend.nickname}}
                        <a class="btn btn-primary" href="#" @click="sender(friend)" role="button">发送消息</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="col-6">
            <div class="shadow-lg p-3 mb-5 bg-white rounded">
                <img :src="currentChat.avatar" :alt="currentChat.nickname" style="width: 50px;" class="img-thumbnail">
                {{currentChat.nickname}}
                <hr/>
                <div class="container">
                    <ul class="content-reply-box mg10">

                        <div v-for="(msg, index) in messageList">

                            <li v-if="msg.sender" class="even">
                                <a class="user" href="#">
                                    <img class="img-responsive avatar_" :src="loginUser.avatar"
                                         :alt="loginUser.nickname">
                                    <span class="user-name">{{ loginUser.nickname }}</span>
                                </a>
                                <div class="reply-content-box">
                                    <span class="reply-time">{{ msg.sendTime }}</span>
                                    <div class="reply-content pr">
                                        <span class="arrow">&nbsp;</span>
                                        {{ msg.content }}
                                    </div>
                                </div>
                            </li>

                            <li v-else class="odd">
                                <a class="user" href="#">
                                    <img class="img-responsive avatar_" :src="currentChat.avatar"
                                         :alt="currentChat.nickname">
                                    <span class="user-name">{{ currentChat.nickname }}</span>
                                </a>
                                <div class="reply-content-box">
                                    <span class="reply-time">{{ msg.sendTime }}</span>
                                    <div class="reply-content pr">
                                        <span class="arrow">&nbsp;</span>
                                        {{ msg.content }}
                                    </div>
                                </div>
                            </li>

                        </div>
                    </ul>
                    <ul class="operating row text-center linear-g">
                        <textarea class="form-control" v-model="messageTxt" rows="3"></textarea>
                        <button type="button" class="btn btn-primary" @click="sendMessage">发送</button>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card" style="width: 200px;">
                <h3>当前登录用户信息</h3>
                <img class="card-img-top" :src="loginUser.avatar" alt="Card image cap">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">{{ loginUser.uid }}</li>
                    <li class="list-group-item">{{ loginUser.username }}</li>
                    <li class="list-group-item">{{ loginUser.nickname }}</li>
                </ul>
                <a class="btn btn-primary" th:href="@{/addFriend}" role="button">添加好友</a>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/webjars/vue/2.6.10/vue.min.js}"></script>
<script th:src="@{/js/WebIMConfig.js}"></script>
<script th:src="@{/js/webimSDK3.0.6.js}"></script>
<script th:inline="javascript">
    var login_user = [[${login_user}]];
    var my_friends = [[${my_friends}]];
    console.log("login_user: ", login_user)
    console.log("my_friends: ", my_friends)

    var app = new Vue({
        el: '#app',
        data: {
            loginUser: login_user,
            myFriends: my_friends,
            webIm: null,
            conn: null,
            messageTxt: "",
            // 当前聊天的好友的信息
            currentChat: {
                avatar: "/images/7abadde05f528f73fd5d21bc9c40b93a.jpeg",
                nickname: "test0005",
                uid: 9,
                username: "test0005"
            },
            // 消息列表
            messageList: [
                /*{
                    // 发送者 true : 表示本人发送的。false：表示好友发送的
                    sender: true,
                    // 我的用户名称
                    myName: "test0004",
                    // 朋友的用户名
                    friendName: "test0005",
                    // 消息内容
                    content: "你好！",
                    // 发送的时间
                    sendTime: "2017-11-18 28:26:15"
                }*/
            ]
        },
        created() {
            // 初始化配置
            this.init();
        },
        methods: {
            sender(friend) {
                this.currentChat = friend;
                console.log("currentChat : ", this.currentChat);
            },

            // 发送消息
            sendMessage() {
                // 生成本地消息id
                var id = this.conn.getUniqueId();
                var msg = new this.webIm.default.message('txt', id);
                let _this = this;
                msg.set({
                    msg: this.messageTxt,
                    to: this.currentChat.username,
                    ext: {'time': new Date().toLocaleString()},
                    success: function (id, serverMsgId) {
                        let sendMsg = {
                            sender: true,
                            myName: _this.loginUser.nickname,
                            friendName: _this.currentChat.nickname,
                            content: _this.messageTxt,
                            sendTime: new Date().toLocaleString()
                        };
                        _this.messageList.push(sendMsg)
                        _this.messageTxt = "";
                        console.log('send private text Success', sendMsg);
                        console.log(_this.messageList);
                    },
                    fail: function (e) {
                        console.log("Send private text error");
                    }
                });
                msg.body.chatType = 'singleChat';
                _this.conn.send(msg.body);
            },

            // 初始化
            init() {
                let _this = this;
                var conn = {};
                WebIM.config = config;
                conn = WebIM.conn = new WebIM.default.connection({
                    appKey: WebIM.config.appkey,
                    isHttpDNS: WebIM.config.isHttpDNS,
                    isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
                    https: WebIM.config.https,
                    url: WebIM.config.xmppURL,
                    apiUrl: WebIM.config.apiURL,
                    isAutoLogin: WebIM.config.isAutoLogin,
                    heartBeatWait: WebIM.config.heartBeatWait,
                    autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
                    autoReconnectInterval: WebIM.config.autoReconnectInterval,
                    isStropheLog: WebIM.config.isStropheLog,
                    delivery: WebIM.config.delivery
                })
                conn.open({
                    apiUrl: config.apiURL,
                    appKey: config.appkey,
                    user: _this.loginUser.username,
                    pwd: _this.loginUser.password
                });
                conn.listen({
                    onOpened: function (message) {
                        var myDate = new Date().toLocaleString();
                        console.log("%c [opened] 连接已成功建立 ,", "color: green", myDate);
                    },
                    onClosed: function (message) {
                        //连接关闭回调
                        console.log("onclose:" + message);
                    },
                    onTextMessage: function (message) {
                        console.log("message: ", message)
                        let sendMsg = {
                            sender: false,
                            myName: message.nickname,
                            friendName: message.from,
                            content: message.data,
                            sendTime: message.ext.time
                        };
                        _this.messageList.push(sendMsg)
                        console.log('onTextMessage() ', sendMsg);
                        console.log(_this.messageList);
                    },
                    onReceivedMessage: function (message) {
                    },    //收到消息送达服务器回执
                    onReadMessage: function (message) {
                    }        //收到消息已读回执
                });
                _this.webIm = WebIM
                _this.conn = conn;
            }
        }
    })
</script>
</body>
</html>